<template>
  <div class="market">
    <el-tabs type="border-card">
      <el-tab-pane label="全国碳市场">
        <el-tabs v-model="activeName">
          <el-tab-pane label="每日碳市场" name="first">
            <ECharts style="height: 50vh;" ref="chart" :option="cnChart"/>
            <el-table
              :data="cnTableData"
              stripe
              style="width: 100%">
              <el-table-column
                prop="date"
                label="日期"
                width="180">
              </el-table-column>
              <el-table-column
                prop="open"
                label="开盘"
                width="180">
              </el-table-column>
              <el-table-column
                prop="close"
                label="收盘">
              </el-table-column>
              <el-table-column
                prop="upDown"
                label="涨跌">
                <template slot-scope="scope">
                  <div v-html="scope.row.upDown"></div>
                </template>
              </el-table-column>
              <el-table-column
                prop="tradeQuantity"
                label="成交量">
              </el-table-column>
              <el-table-column
                prop="tradeMoney"
                label="成交额">
              </el-table-column>
              <el-table-column
                prop="amplitude"
                min-width="30"
                label="振幅">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="每周碳市场" name="second">
            <ECharts style="height: 50vh;" ref="chart" :option="cnWeekChart"/>
            <el-table
              :data="cnWeekTableData"
              stripe
              style="width: 100%">
              <el-table-column
                prop="date"
                label="日期"
                width="180">
              </el-table-column>
              <el-table-column
                prop="open"
                label="开盘"
                width="180">
              </el-table-column>
              <el-table-column
                prop="close"
                label="收盘">
              </el-table-column>
              <el-table-column
                prop="upDown"
                label="涨跌">
                <template slot-scope="scope">
                  <div v-html="scope.row.upDown"></div>
                </template>
              </el-table-column>
              <el-table-column
                prop="tradeQuantity"
                label="成交量">
              </el-table-column>
              <el-table-column
                prop="tradeMoney"
                label="成交额">
              </el-table-column>
              <el-table-column
                prop="amplitude"
                min-width="30"
                label="振幅">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="地方碳市场">
        <el-tabs :tab-position="tabPosition" style="height: 82vh;">
          <el-tab-pane label="北京碳市场">
            <el-row>
              <el-col :span="6">
                <el-card class="box-card">
                  <el-table
                    :data="bjTableData"
                    style="width: 100%;border-right: 1px solid #eeeaea;border-left: 1px solid #eeeaea">
                    <el-table-column
                      prop="year"
                      label="年度"
                      max-width="180">
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="价格(USD)"
                      max-width="180">
                    </el-table-column>
                  </el-table>
                </el-card>
              </el-col>
              <el-col :span="18">
                <ECharts style="height: 51vh;" ref="chart" :option="bjChart"/>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="上海碳市场">
            <el-row>
              <el-col :span="6">
                <el-card class="box-card">
                  <el-table
                    :data="shTableData"
                    style="width: 100%;border-right: 1px solid #eeeaea;border-left: 1px solid #eeeaea">
                    <el-table-column
                      prop="year"
                      label="年度"
                      max-width="180">
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="价格(USD)"
                      max-width="180">
                    </el-table-column>
                  </el-table>
                </el-card>
              </el-col>
              <el-col :span="18">
                <ECharts style="height: 51vh;" ref="chart" :option="shChart"/>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="深圳碳市场">
            <el-row>
              <el-col :span="6">
                <el-card class="box-card">
                  <el-table
                    :data="szTableData"
                    style="width: 100%;border-right: 1px solid #eeeaea;border-left: 1px solid #eeeaea">
                    <el-table-column
                      prop="year"
                      label="年度"
                      max-width="180">
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="价格(USD)"
                      max-width="180">
                    </el-table-column>
                  </el-table>
                </el-card>
              </el-col>
              <el-col :span="18">
                <ECharts style="height: 51vh;" ref="chart" :option="szChart"/>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="广东碳市场">
            <el-row>
              <el-col :span="6">
                <el-card class="box-card">
                  <el-table
                    :data="gdTableData"
                    style="width: 100%;border-right: 1px solid #eeeaea;border-left: 1px solid #eeeaea">
                    <el-table-column
                      prop="year"
                      label="年度"
                      max-width="180">
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="价格(USD)"
                      max-width="180">
                    </el-table-column>
                  </el-table>
                </el-card>
              </el-col>
              <el-col :span="18">
                <ECharts style="height: 51vh;" ref="chart" :option="gdChart"/>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="天津碳市场">
            <el-row>
              <el-col :span="6">
                <el-card class="box-card">
                  <el-table
                    :data="tjTableData"
                    style="width: 100%;border-right: 1px solid #eeeaea;border-left: 1px solid #eeeaea">
                    <el-table-column
                      prop="year"
                      label="年度"
                      max-width="180">
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="价格(USD)"
                      max-width="180">
                    </el-table-column>
                  </el-table>
                </el-card>
              </el-col>
              <el-col :span="18">
                <ECharts style="height: 51vh;" ref="chart" :option="tjChart"/>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="重庆碳市场">
            <el-row>
              <el-col :span="6">
                <el-card class="box-card">
                  <el-table
                    :data="cqTableData"
                    style="width: 100%;border-right: 1px solid #eeeaea;border-left: 1px solid #eeeaea">
                    <el-table-column
                      prop="year"
                      label="年度"
                      max-width="180">
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="价格(USD)"
                      max-width="180">
                    </el-table-column>
                  </el-table>
                </el-card>
              </el-col>
              <el-col :span="18">
                <ECharts style="height: 51vh;" ref="chart" :option="cqChart"/>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="湖北碳市场">
            <el-row>
              <el-col :span="6">
                <el-card class="box-card">
                  <el-table
                    :data="hbTableData"
                    style="width: 100%;border-right: 1px solid #eeeaea;border-left: 1px solid #eeeaea">
                    <el-table-column
                      prop="year"
                      label="年度"
                      max-width="180">
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="价格(USD)"
                      max-width="180">
                    </el-table-column>
                  </el-table>
                </el-card>
              </el-col>
              <el-col :span="18">
                <ECharts style="height: 51vh;" ref="chart" :option="hbChart"/>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="福建碳市场">
            <el-row>
              <el-col :span="6">
                <el-card class="box-card">
                  <el-table
                    :data="fjTableData"
                    style="width: 100%;border-right: 1px solid #eeeaea;border-left: 1px solid #eeeaea">
                    <el-table-column
                      prop="year"
                      label="年度"
                      max-width="180">
                    </el-table-column>
                    <el-table-column
                      prop="price"
                      label="价格(USD)"
                      max-width="180">
                    </el-table-column>
                  </el-table>
                </el-card>
              </el-col>
              <el-col :span="18">
                <ECharts style="height: 51vh;" ref="chart" :option="fjChart"/>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="欧洲碳市场">
        <el-row>
          <el-col :span="6">
            <el-card class="box-card">
              <el-table
                :data="europeTableData"
                style="width: 100%;border-right: 1px solid #eeeaea;border-left: 1px solid #eeeaea">
                <el-table-column
                  prop="year"
                  label="年度"
                  max-width="180">
                </el-table-column>
                <el-table-column
                  prop="price"
                  label="价格(USD)"
                  max-width="180">
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="18">
            <ECharts style="height: 51vh;" ref="chart" :option="euChart"/>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="美国碳市场">
        <el-row>
          <el-col :span="6">
            <el-card class="box-card">
              <el-table
                :data="usTableData"
                style="width: 100%;border-right: 1px solid #eeeaea;border-left: 1px solid #eeeaea">
                <el-table-column
                  prop="year"
                  label="年度"
                  max-width="180">
                </el-table-column>
                <el-table-column
                  prop="price"
                  label="价格(USD)"
                  max-width="180">
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="18">
            <ECharts style="height: 51vh;" ref="chart" :option="usChart"/>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="韩国碳市场">
        <el-row>
          <el-col :span="6">
            <el-card class="box-card">
              <el-table
                :data="hgTableData"
                style="width: 100%;border-right: 1px solid #eeeaea;border-left: 1px solid #eeeaea">
                <el-table-column
                  prop="year"
                  label="年度"
                  max-width="180">
                </el-table-column>
                <el-table-column
                  prop="price"
                  label="价格(USD)"
                  max-width="180">
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
          <el-col :span="18">
            <ECharts style="height: 51vh;" ref="chart" :option="hgChart"/>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>

import {queryMarketInfo} from "@/api/carbon-manage/trade";
import Echart from "@/common/echart/index.vue";

export default {
  components: {Echart},
  data() {
    return {
      activeName: 'first',
      tabPosition: 'left',
      cnTableData: [],
      cnWeekChart: {},
      cnChart: {},
      cnWeekTableData: [],
      europeTableData: [],
      hgTableData: [],
      usTableData: [],
      bjTableData: [],
      shTableData: [],
      szTableData: [],
      gdTableData: [],
      tjTableData: [],
      cqTableData: [],
      hbTableData: [],
      fjTableData: [],
      euChart: {},
      usChart: {},
      hgChart: {},
      bjChart: {},
      shChart: {},
      szChart: {},
      gdChart: {},
      tjChart: {},
      cqChart: {},
      hbChart: {},
      fjChart: {},
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      queryMarketInfo(0).then(res => {
        this.cnTableData = res.data.map(item => {
          let infoList = item.infoList;
          return {
            date: infoList[0],
            open: infoList[1],
            close: infoList[2],
            upDown: infoList[5],
            tradeQuantity: infoList[6],
            tradeMoney: infoList[7],
            amplitude: infoList[8]
          }
        });

        let dateList = res.data.map(item => {
          let infoList = item.infoList;
          return infoList[0].substring(5);
        });
        let openList = res.data.map(item => {
          let infoList = item.infoList;
          return infoList[1]
        });
        let closeList = res.data.map(item => {
          let infoList = item.infoList;
          return infoList[2]
        });

        this.cnChart = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {},
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: dateList.reverse()
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}$'
            }
          },
          series: [
            {
              name: '开盘',
              type: 'line',
              data: openList.reverse(),
              markLine: {
                data: [{type: 'average', name: 'Avg'}]
              }
            },
            {
              name: '收盘',
              type: 'line',
              data: closeList.reverse(),
              markPoint: {
                data: [{type: 'average', name: 'Avg'}]
              },
            }
          ]
        };
      });
      queryMarketInfo(12).then(res => {
        this.cnWeekTableData = res.data.map(item => {
          let infoList = item.infoList;
          return {
            date: infoList[0],
            open: infoList[1],
            close: infoList[2],
            upDown: infoList[5],
            tradeQuantity: infoList[6],
            tradeMoney: infoList[7],
            amplitude: infoList[8]
          }
        });
        let dateList = res.data.map(item => {
          let infoList = item.infoList;
          return infoList[0].substring(5);
        });
        let openList = res.data.map(item => {
          let infoList = item.infoList;
          return infoList[1]
        });
        let closeList = res.data.map(item => {
          let infoList = item.infoList;
          return infoList[2]
        });

        this.cnWeekChart = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {},
          toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: {readOnly: false},
              magicType: {type: ['line', 'bar']},
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: dateList.reverse()
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value}$'
            }
          },
          series: [
            {
              name: '开盘',
              type: 'line',
              data: openList.reverse(),
              markLine: {
                data: [{type: 'average', name: 'Avg'}]
              }
            },
            {
              name: '收盘',
              type: 'line',
              data: closeList.reverse(),
              markPoint: {
                data: [{type: 'average', name: 'Avg'}]
              },
            }
          ]
        };
      });
      queryMarketInfo(1).then(res => {
        this.europeTableData = res.data;

        let arrList = [];
        for (let i = 0; i < res.data.length; i++) {
          arrList.splice(0, 0, res.data[i]);
        }
        let yearList = arrList.map(item => item.year);
        let dataList = arrList.map(item => item.price);

        this.euChart = {
          title: {
            text: '欧洲碳市场价格行情',
            subtext: 'European carbon market prices',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: yearList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: dataList,
              type: 'line'
            }
          ]
        };
      });
      queryMarketInfo(2).then(res => {
        this.usTableData = res.data;

        let arrList = [];
        for (let i = 0; i < res.data.length; i++) {
          arrList.splice(0, 0, res.data[i]);
        }
        let yearList = arrList.map(item => item.year);
        let dataList = arrList.map(item => item.price);

        this.usChart = {
          title: {
            text: '美国碳市场价格行情',
            subtext: 'Us carbon market prices',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: yearList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: dataList,
              type: 'line'
            }
          ]
        };
      });
      queryMarketInfo(3).then(res => {
        this.hgTableData = res.data;

        let arrList = [];
        for (let i = 0; i < res.data.length; i++) {
          arrList.splice(0, 0, res.data[i]);
        }
        let yearList = arrList.map(item => item.year);
        let dataList = arrList.map(item => item.price);

        this.hgChart = {
          title: {
            text: '韩国碳市场价格行情',
            subtext: 'South Korea carbon market prices',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: yearList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: dataList,
              type: 'line'
            }
          ]
        };
      });
      queryMarketInfo(4).then(res => {
        this.bjTableData = res.data;

        let arrList = [];
        for (let i = 0; i < res.data.length; i++) {
          arrList.splice(0, 0, res.data[i]);
        }
        let yearList = arrList.map(item => item.year);
        let dataList = arrList.map(item => item.price);

        this.bjChart = {
          title: {
            text: '北京碳市场历史行情',
            subtext: 'Beijing carbon market prices',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: yearList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: dataList,
              type: 'line'
            }
          ]
        };
      });
      queryMarketInfo(5).then(res => {
        this.shTableData = res.data;

        let arrList = [];
        for (let i = 0; i < res.data.length; i++) {
          arrList.splice(0, 0, res.data[i]);
        }
        let yearList = arrList.map(item => item.year);
        let dataList = arrList.map(item => item.price);

        this.shChart = {
          title: {
            text: '上海碳市场历史行情',
            subtext: 'Shanghai carbon market prices',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: yearList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: dataList,
              type: 'line'
            }
          ]
        };
      });
      queryMarketInfo(6).then(res => {
        this.szTableData = res.data;

        let arrList = [];
        for (let i = 0; i < res.data.length; i++) {
          arrList.splice(0, 0, res.data[i]);
        }
        let yearList = arrList.map(item => item.year);
        let dataList = arrList.map(item => item.price);

        this.szChart = {
          title: {
            text: '深圳碳市场历史行情',
            subtext: 'Shenzhen carbon market prices',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: yearList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: dataList,
              type: 'line'
            }
          ]
        };
      });
      queryMarketInfo(7).then(res => {
        this.gdTableData = res.data;

        let arrList = [];
        for (let i = 0; i < res.data.length; i++) {
          arrList.splice(0, 0, res.data[i]);
        }
        let yearList = arrList.map(item => item.year);
        let dataList = arrList.map(item => item.price);

        this.gdChart = {
          title: {
            text: '广东碳市场历史行情',
            subtext: 'Guangdong carbon market prices',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: yearList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: dataList,
              type: 'line'
            }
          ]
        };
      });
      queryMarketInfo(8).then(res => {
        this.tjTableData = res.data;

        let arrList = [];
        for (let i = 0; i < res.data.length; i++) {
          arrList.splice(0, 0, res.data[i]);
        }
        let yearList = arrList.map(item => item.year);
        let dataList = arrList.map(item => item.price);

        this.tjChart = {
          title: {
            text: '天津碳市场历史行情',
            subtext: 'Tianjin carbon market prices',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: yearList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: dataList,
              type: 'line'
            }
          ]
        };
      });
      queryMarketInfo(9).then(res => {
        this.cqTableData = res.data;
        let arrList = [];
        for (let i = 0; i < res.data.length; i++) {
          arrList.splice(0, 0, res.data[i]);
        }
        let yearList = arrList.map(item => item.year);
        let dataList = arrList.map(item => item.price);

        this.cqChart = {
          title: {
            text: '重庆碳市场历史行情',
            subtext: 'Chongqing carbon market prices',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: yearList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: dataList,
              type: 'line'
            }
          ]
        };
      });
      queryMarketInfo(10).then(res => {
        this.hbTableData = res.data;
        let arrList = [];
        for (let i = 0; i < res.data.length; i++) {
          arrList.splice(0, 0, res.data[i]);
        }
        let yearList = arrList.map(item => item.year);
        let dataList = arrList.map(item => item.price);

        this.hbChart = {
          title: {
            text: '湖北碳市场历史行情',
            subtext: 'Hubei carbon market prices',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: yearList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: dataList,
              type: 'line'
            }
          ]
        };
      });
      queryMarketInfo(11).then(res => {
        this.fjTableData = res.data;
        let arrList = [];
        for (let i = 0; i < res.data.length; i++) {
          arrList.splice(0, 0, res.data[i]);
        }
        let yearList = arrList.map(item => item.year);
        let dataList = arrList.map(item => item.price);

        this.fjChart = {
          title: {
            text: '福建碳市场历史行情',
            subtext: 'Fujian carbon market prices',
            left: 'center'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: yearList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: dataList,
              type: 'line'
            }
          ]
        };
      });

    },
  },

}
</script>

<style scoped lang="scss">
.market {
  margin: 10px;
}

.card-title {
  font-family: 微软雅黑;
  font-weight: bolder;
}

.img_size {
  width: 10vh;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
